<template>
  <div class="class-list-page">
    <ul class="classroom-list">
      <li class="classroom-item col-6 col-sm-6 col-md-6 col-lg-3" v-for="item in classroomData.data" :key="item._id">
        <div class="classroom-img">
          <a href="">
            <img src="../assets/default.jpg" alt="" lazyload="true" :data-original="item.image">
          </a>
          <div class="classroom-hover-info">
            <ul class="classroom-hover-list">
              <li>
                <i class="iconfont icon-user"></i>
                <span class="list-data">{{item.students}}</span>
                <span>人已加入学习</span>
              </li>
              <li>
                <i class="iconfont icon-book1"></i>
                <span class="list-data">{{item.times}}</span>
                <span>课时</span>
              </li>
              <li>
                <i class="iconfont icon-laba"></i>
                <span class="list-data">{{item.homeworks}}</span>
                <span>次作业</span>
              </li>
              <li>
                <i class="iconfont icon-user"></i>
                <span class="list-data">{{item.hours}}</span>
                <span>小时答疑</span>
              </li>
            </ul>
          </div>
          <div class="classroom-tag">
            <span>班级</span>
          </div>
        </div>
        <div class="classroom-info">
          <div class="classroom-title">
            <h3 class="fs-md">{{item.title}}</h3>
          </div>
          <div class="classroom-desc">
            <p class="font-gray-1 fs-xs">
              {{item.desc}}
            </p>
          </div>
          <div class="imme-join">
            <a>立即加入</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  props: ['classroomData'],
  setup () {
    onMounted(() => {
      lazyload()
    })
    // 图片懒加载
    function lazyload () {
      const scrollY = document.documentElement.scrollTop
      const offsetHeight = document.documentElement.offsetHeight
      const imgs = document.querySelectorAll('img[data-original][lazyload]')
      imgs.forEach(item => {
        if (item.dataset.original === '') {
          return
        }
        const rect = item.getBoundingClientRect()
        // if (rect.bottom >= 0 && rect.top < scrollY + offsetHeight) {
        const img = new Image()
        img.src = item.dataset.original
        console.log(img.src)
        img.onload = function() {
          item.src = img.src
        }
        item.removeAttribute('data-original')
        item.removeAttribute('lazyload')
        // }
      })
    }
    document.addEventListener('scroll', lazyload)
  }
}
</script>

<style lang="scss" scoped>
.class-list-page {
  width: 100%;
  .classroom-list {
    display: flex;
    list-style: none;
    margin: 0 -10px;
    flex-wrap: wrap;
    .classroom-item {
      @media (max-width: 992px) {
        margin-bottom: 10px;
      }
      padding: 0 10px;
      cursor: pointer;
      position: relative;
      .classroom-img {
        width: 100%;
        position: relative;
        a {
          display: block;
          img {
            width: 100%;
            height: 154.45px;
          }
        }
        &:hover .classroom-hover-info {
          opacity: 1;
        }
        .classroom-hover-info {
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
          opacity: 0;
          background-color: rgba(0, 0, 0, 0.6);
          z-index: 999;
          ul {
            list-style-type: none;
            height: 154.46px;
            padding: 30px 50px;
            li {
              .iconfont {
                margin-right: 10px;
              }
              color: #fff;
              .list-data {
                color: #15c288;
              }
            }
          }
        }
        .classroom-tag {
          position: absolute;
          top: -25px;
          span {
            z-index: 998;
            position: relative;
            left: 4px;
            bottom: 2px;
            color: #fff;
          }
          &::after {
            content: '';
            position: absolute;
            display: inline-block;
            border-left: 70px solid #12c888;
            border-bottom: 50px solid transparent;
            position: relative;
            left: -28px;
            top: 25px;
          }
        }
      }
      .classroom-info {
        // &:hover + .classroom-img > .classroom-hover-info {
        //   opacity: 1;
        // }
        border: 1px solid #f0f0f0;
        padding: 0 14px;
        .classroom-title {
          h3 {
            margin: 13px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .classroom-desc {
          p {
            height: 34px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .imme-join {
          width: 100%;
          margin-bottom: 10px;
          a {
            display: block;
            width: 100%;
            background-color: #15c288;
            padding: 8px 0;
            text-align: center;
            border-radius: 5px;
            color: #fff;
            &:hover {
              color: #fff !important;
              background-color: #13ab78;
            }
          }
        }
      }
    }
  }
}
</style>
